<template>
	<view style="padding-bottom: 50px;">
		<viwe class='item'>
			<image :src="messageInfo.fromUserImage" class="avatar"></image>
			<view class="info">
				<view class="name">{{messageInfo.fromUserName}}</view>
				<view class="time" >{{messageInfo.createTime}}</view>
			</view>
		</viwe>
		
		<view class="wrapper">
		    <view class="title">{{messageInfo.title}}</view>
			<view v-html="messageInfo.content"></view>
		</view>
		
	<!-- 	<view class="footer">
			<view class="confirmBtn" @click="back">确认收到</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageInfo:''
			}
		},
		onLoad(option) {
			console.log(option.role)
			if(option.role==='2'){
				console.log(2222)
				this.getMessageFromInfo(option.id)
			}else if(option.role==='1'){
				console.log(111)
				this.getMessageFromInfo(option.id)
			}else{
				this.getMessageToInfo(option.id)
			}
			
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			//用户通知详情
			getMessageToInfo(id){
				this.$api.getMessageToInfo({
					id:id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.messageInfo = res.data.dataMap
						this.getunreadnumber()
					}
				})
			},
			//老师教务通知详情
			getMessageFromInfo(id){
				this.$api.getMessageToInfo({
					id:id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.messageInfo = res.data.dataMap
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
.item{padding:10px;margin:10px;box-sizing:border-box;display: flex;
      border-bottom: 1px solid #dfdfdf;
      .avatar{width:40px;height: 40px;border-radius: 50%;}
  }
  .wrapper{padding:0px 20px;}
  .name{font-weight: bold;}
  .info{margin-left: 10px;}
  .desc{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:24rpx;}
  .time{color:gray;font-size: 24rpx;}
  .title{font-weight: bold;margin:10px 0;}
  
  .footer{
  	position: fixed;
  	bottom: 0;
  	left:0;
  	width:95%;
  	background-color: white;
  	border-top:1px solid #efefef;
  	height: 40px;
	padding:10px;
  	.confirmBtn{
  		flex:1;
  		text-align: center;
  		background: rgb(254,85,51);
  		border-radius: 10px;
  		color:white;
  		line-height: 40px;
  		width:100%;
  	}
  }
</style>
